<template>
  <div class="orderDetail">
    <div class="order_header">
      <div class="order_header_num">
        <span>订单号： {{orderList.order_num}}</span>
        <span class="wait_pay">{{orderList.statusType}}</span>
<!--        <span v-if="orderList.status=='1'" class="wait_pay">待付款</span>-->
<!--        <span v-if="orderList.status=='3'" class="wait_pay">待收货</span>-->
<!--        <span v-if="orderList.status=='2'" class="wait_pay">待发货</span>-->
<!--        <span v-if="orderList.status=='4'" class="wait_pay">待评价</span>-->
<!--        <span v-if="orderList.status=='6'" class="wait_pay">交易关闭</span>-->
      </div>
    </div>

    <!-- 拼团状态 -->
    <van-steps
      :steps="steps"
      :active="active"
    />
    <!-- 拼团状态结束 -->
    <!--<div class="order_detail" v-if="orderList.order_address">
      <div>
        <div class="name">收货人: {{orderList.order_address.consignee}}</div>
        <div class="tel">电话: {{orderList.order_address.phone}}</div>
      </div>
      <div class="address">收货地址：{{orderList.order_address.province}} {{orderList.order_address.city}} {{orderList.order_address.area}} {{orderList.order_address.add_detail}}</div>
    </div>-->
    <!-- 物流信息 -->
    <div class="logistics" v-if="orderList.status == 3">
      <div class="item">
        <img src="../../static/images/logistics-company.png"/>
        <span style="margin-left: 6rpx">物流公司：{{orderList.express?orderList.express:''}}</span>
      </div>
      <div class="item item-spec">
        <div style="display: flex;align-items: center">
          <img src="../../static/images/logistics-num.png"/>
          <span style="margin-left: 11rpx;">物流单号：<span style="color: blue">{{orderList.express_num?orderList.express_num:''}}</span></span>
        </div>
        <div @click="copyExpressNum" class="copy">复制</div>
      </div>
    </div>
    <!-- 商品列 -->
    <div>
      <ul class="order-item">
        <li style="margin-bottom:15px;background:#fff">
          <div class="order-item-details" v-for="(value1,index1) in orderList.order_item" :key='index1' @click="toGoodsDetail(value1)">
            <img :src="value1.goods_info.thumb_url" class="order-item-details-img" mode="aspectFill"/>
            <div class="order-item-details-name">
              <div class="details-name">
                  <!-- <span class="details-tip">海外购</span> -->
                  {{value1.goods_info.name}}
              </div>
              <div class="details-name" v-if="!value1.goods_spu_info">
              </div>
              <div class="details-name" v-if="value1.goods_spu_info">
<!--                  {{value1.goods_spu_info.spu_name}}-->
                {{value1.goods_spu_info.size_spu_name==''?'':(value1.goods_spu_info.size_spu_name+'码')}}
                {{value1.goods_spu_info.color_spu_name==''?'':('，'+value1.goods_spu_info.color_spu_name)}}
              </div>
              <div class="details-number">
                <div class="details-number-money" v-if="value1.type!='integral'">￥{{value1.goods_spu_info.price}}</div>
                <div class="details-number-money" v-else>积分 {{value1.integral}}</div>
                <div class="details-number-number">X{{value1.num}}</div>
              </div>
            </div>
          </div>

          <div class="order-item-header">
            <div class="order-item-status">
              <div>支付方式</div>
              <div>{{orderList.pay_type=="balance"?'余额支付':'微信支付'}}</div>
            </div>
            <div class="order-item-status" v-if="balance.discount_info">
              <div>折扣</div>
              <div>{{orderList.pay_type=='balance'?balance.discount_info.name:'无'}}</div>
            </div>
            <div class="order-item-status" v-if="orderList.discount_note">
              <div>促销减</div>
              <div>￥{{orderList.discount_note.reduce}}</div>
            </div>
            <div class="order-item-status" v-if="balance.discount_info">
              <div>会员优惠</div>
              <div>{{orderList.pay_type=='balance'?'￥'+(orderList.w_amount*100-orderList.b_amount*100)/100:'无'}}</div>
            </div>
            <div class="order-item-status" v-if="orderList.user_coupon_info">
              <div>优惠券:</div>
              <div>{{orderList.user_coupon_info.name}}</div>
            </div>
            <div class="order-item-status">
              <div>邮费</div>
              <div>￥{{orderList.express_fee}}</div>
            </div>
            <div class="order-item-status">
              <div>备注:</div>
              <div>{{orderList.remark}}</div>
            </div>
            <div class="order-item-num">
              <div>合计:</div>
              <div>￥{{orderList.m_amount}}</div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 收获地址 -->
      <div class="address">
        <div class="address_wrapper">
          <div class="address_top">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/people.png"  class="address_top_header">
            <div class="address_top_nick">{{orderList.order_address.consignee}}</div>
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/tel.png"  class="address_top_phone">
            <div class="address_top_tel">{{orderList.order_address.phone}}</div>
          </div>
          <div class="address_bottom">
            {{orderList.order_address.province}}-{{orderList.order_address.city}}-{{orderList.order_address.area}}-{{orderList.order_address.address}}
          </div>
        </div>
      </div>
      <!-- 收获地址结束 -->

      <!-- 商品列结束 -->
      <div class="total_count">
        <div>实付款：<span>￥{{orderList.s_amount}}</span></div>
        <div>下单时间:  {{orderList.updated_at}}</div>
        <span v-if="!orderList.refund_info && (orderList.status == '3' || orderList.status == '4' || orderList.status == '2')" class="after-sale" @click="afterSale">申请售后</span>
        <span v-if="orderList.refund_info" class="already-apply">该订单已申请售后服务，请<button open-type="contact">联系客服</button>查询处理进度</span>
      </div>

      <!-- 底部确认或取消订单 -->
      <div class="btn" >
        <div class="grey" v-if="orderList.status=='1'" @click="cancel(orderList.order_num)">取消订单</div>
        <div v-if="orderList.status==1" @click="changePayment">付款</div>
        <!-- <div v-if="orderList.status!='4' &&orderList.status!='6'" @click="cancel(orderList.order_num)">取消订单</div> -->
        <div v-if="orderList.status=='4'" @click="toComment(orderList.order_num)">去评价</div>
      </div>
    </div>

    <div class="module" @click.stop="balanceShow=false" v-if="balanceShow">
      <div class="module-pay">
        <img class="del-icon" :src="FileUrl+'del.png'" @click.stop="balanceShow=false"/>
        <div class="title">番禺供销社百越网购</div>
        <div class="balance">{{orderList.s_amount}}</div>
        <div class="tips">
          <span>付款方式</span>
          <span>账户余额（{{balance.discount_info.name}}）</span>
        </div>
        <div class="btns">
          <div class="to-pay" @click.stop="balancePayment">付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'orderDetail',
    data() {
      return {
        FileUrl: this.$base,
        orderList:'',
        address:'',
        orderNum:'',//订单编号
        steps: [],
        active:-1,
        balanceShow: false,
        myBalance: 0,
        payArray:['微信支付', '余额支付'],
        balance: ''
      }
    },
    methods:{
      async cancel(order_num){
        let res=await this.$currency.showModal('取消订单','是否取消订单')
        if(res){
          var userToken=wx.getStorageSync('userToken')
          let data=await this.$request.postData('/order/cancelOrder',{order_num:order_num,user_token:userToken})
          this.$currency.showToast(data.data.message)
          setTimeout(()=>{
            wx.navigateBack({
              delta: 1
            })
          })
        }
      },
      async getOrderDetail(){//获取商品订单快照
        let res=await this.$request.getData('/order/getOrders',{
          order_num:this.orderNum,
          user_token: wx.getStorageSync('userToken')
        })
        if(res.data.level=='success'){
          this.orderList=res.data.data;
          this.checkMyBalance();
          const state=this.orderList.status;
          if(this.orderList.type=='group'){
            this.steps= [{text: '买家已付款'},{text: '已成团'},{text: '商家已发货'},{text: '交易完成'}];
            switch(state){
              case '8':this.active=0;break;
              case '3':this.active=1;break;
              case '4':this.active=2;break;
              case '5':this.active=3;break;
              default:this.active=-1;
            }
          }else{
            this.steps= [{text: '买家已付款'},{text: '商家已发货'},{text: '交易完成'}];
            switch(state){
              case '2':this.active=0;break;
              case '3':this.active=1;break;
              case '4':this.active=2;break;
              case '5':this.active=2;break;
              default:this.active=-1;
            }
          }

          /*if(this.orderList.refund_info){
            this.steps= [{text: '申请售后'},{text: '等待卖家同意'},{text: '申请完成'}];
            const state=this.orderList.refund_info.status;
            switch(state){
              case '0':this.active=0;break;
              case '1':this.active=1;break;
              case '2':this.active=2;break;
              case '3':this.active=2;break;
              default:this.active=-1;
            }
          }*/



        }
      },
      changePayment(){
        let _this = this;
        wx.showActionSheet({
          itemList: _this.payArray,
          success (res) {
            console.log(res)
            if (_this.payArray[res.tapIndex] == '微信支付'){
              if (_this.orderList.pay_type=='weixin') {
                _this.pay();
              }else {
                _this.changePayType('weixin');
              }
            } else {
              if (_this.orderList.pay_type=='balance') {
                _this.balanceShow = true;
              }else {
                _this.changePayType('balance');
              }

              // _this.checkMyBalance()
            }
          },
          fail (res) {
            console.log(res,"aa")
          }
        })
      },
      async changePayType(type){
        var userToken=wx.getStorageSync('userToken');
        let res=await this.$request.postData('/order/changePayType',{
          user_token: userToken,
          order_num: this.orderList.order_num,
          pay_type: type
        })
        if (res.data.level == 'success'){
          this.orderList = '';
          this.orderList = res.data.data
          if (type == 'weixin'){
            this.pay();
          }else {
            this.balanceShow = true;
          }
        }
      },
      //获取我的余额
      async checkMyBalance(){
        var userToken=wx.getStorageSync('userToken');
        let res=await this.$request.getData('/payment/checkMyBalance',{
          user_token: userToken
        })
        if (res.data.level == 'success'){
          this.balance = res.data.data;
          this.payArray = [];
          if (this.orderList.pay_type == 'weixin'){
            this.payArray = [
              "微信支付",
              "余额支付"+"("+res.data.data.available_money+")"
            ]
          } else {
            this.payArray = [
              "余额支付"+"("+res.data.data.available_money+")",
              "微信支付"
            ]
          }
          // this.payArray[1] = "余额支付"+"("+res.data.data+")";
          // this.balanceShow = true;
          // this.myBalance = res.data.data;
          // let _this = this;
          // wx.showModal({
          //   title: "当前余额",
          //   content: "￥"+res.data.data,
          //   success (res) {
          //     if (res.confirm) {
          //       _this.balancePayment(value);
          //     } else if (res.cancel) {
          //       _this.$currency.showToast('取消成功',1500);
          //     }
          //   },
          // })
          // this.balancePayment(order_num);
        }
      },
      //余额支付
      async balancePayment(){
        this.balanceShow = false;
        var userToken=wx.getStorageSync('userToken');
        let res=await this.$request.postData('/payment/balancePayment',{
          user_token: userToken,
          order_num: this.orderList.order_num
        })
        if (res.data.level == 'success'){
          let _this=this;
          _this.$currency.showToast(res.data.message,1500);
          // setTimeout(()=>{
          //   _this.$currency.redirectTo(`/pages/orderDetail/main?num=${order_num}`)
          // },1500)
          if(_this.orderList.order_item[0].type=='group'){
            //拼团支付完成跳转到拼团订单详情
            setTimeout(()=>{
              console.log(_this.orderList.order_num,7777)
              _this.$currency.navigateTo(`/pages/assembleDetail/assembleDetail?order_num=${_this.orderList.order_num}`)
            },1500)
          }else{
            setTimeout(()=>{
              wx.switchTab({url:'/pages/person/person'})
            },1500)
          }
        }else {
          this.$currency.showToast(res.data.message,"none",1500);
        }
      },
      async pay(){
           let _this=this
            var userToken=wx.getStorageSync('userToken')
            let res=await this.$request.postData('/payment/weChatPayment',{'order_num':this.orderList.order_num,user_token:userToken})
            let data=res.data.data
            wx.requestPayment({
              timeStamp: data.timeStamp,
              nonceStr: data.nonceStr,
              package: data.package,
              signType: data.signType,
              paySign: data.paySign,
              success() {
                _this.$currency.showToast('支付成功')
                if(_this.orderList.order_item[0].type=='group'){
                  //拼团支付完成跳转到拼团订单详情
                  setTimeout(()=>{
                    console.log(_this.orderList.order_num,7777)
                    _this.$currency.navigateTo(`/pages/assembleDetail/assembleDetail?order_num=${_this.orderList.order_num}`)
                  },1500)
                }else{
                  setTimeout(()=>{
                    wx.switchTab({url:'/pages/person/person'})
                  },1500)
                }


              },
              fail(res) {
                console.log('取消支付')
              }
            })
      },
      toComment(num){
        this.$currency.navigateTo('/pages/comment/comment?order_num='+num)
      },
      toGoodsDetail(value){
        if(value.type=='group'){
          this.$currency.navigateTo(`/pages/goodsAssemble/goodsAssemble?id=${value.id}&activeId=${this.orderList.activity_id}`)
        }else if(value.type=='bargain'){
          this.$currency.navigateTo(`/pages/discount/goodsDiscount/goodsDiscount?id=${value.bargain_id}&activeId=${this.orderList.activity_id}`)
        }else{
          this.$currency.navigateTo('/pages/goodsDetail/goodsDetail?id='+value.goods_id)
        }
      },
      afterSale(order_num) {
        this.$currency.navigateTo('/pages/afterSale/afterSale?num='+this.orderNum)
      },
      inputExpress() {
        this.$currency.navigateTo('/pages/inputExpress/inputExpress?order_num='+this.orderNum)
      },
      copyExpressNum() {
        wx.setClipboardData({
          data: this.orderList.express_num,
          success: function (res) {
            wx.showToast({
              title: '复制成功',
            });
          }
        });
      }
    },
    onLoad(options){
      this.orderNum=options.num
      this.getOrderDetail();
    },
    onShow() {
      this.getOrderDetail();
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "../../common/css/mixin";
  .orderDetail{
    width:100%;
    min-height: 100%;
    background:#eee;
    padding-top:5px;
  }
  .order_header{
    margin-top:10px;
    &_num{
      background:#fff;
      display: flex;
      justify-content: space-between;
      align-items:center;
      height: 50px;
      &>span:nth-child(1){
        margin-left:10px;
      }
      &>span:nth-child(2){
        color:red;
        margin-right:10px;
      }
    }
  }
  .order_detail{
    margin-top:10px;
    display: flex;
    flex-wrap: wrap;
    padding:5px 0;
    background: #fff;
    &>div{
      width:100%;
      margin-left:10px;
      margin-top:5px;
      .name{
        margin-right:15px;
        margin-bottom: 5px;
      }
    }
  }
    // 商品列
  .flexBetween{
  display:flex;
  justify-content:space-between;
}
  .order{
    width:100%;
    &-item{
      background:#eee;
      padding-top:15px;
    }
    &-nav{
      position: fixed;
      top:0px;
      border-top:1px solid #eee;
      width:100%;
      height:40px;
      display:flex;
      background: #fff;
      &-item{
        flex:1;
        line-height:40px;
        text-align:center;
      }
      .select{
        border-bottom:1px solid red;
        color:red;
      }
    }
    &-item-header{
      width:calc(100% - 40px);
      margin:0px 20px;
      border-bottom:1px solid #eee;
      line-height:40px;
      .order-item-num{
        @extend .flexBetween;
      }
      .order-item-status{
        @extend .flexBetween;
        border-bottom: 1px solid #eee;
      }
    }
    &-item-details{
      width:calc(100% - 40px);
      margin:0px 20px;
      border-bottom:1px solid #eee;
      display:flex;
      height:100px;
      &-img{
        width:80px;
        height:80px;
        margin:10px 10px;
      }
      &-name{
        flex:1;
        margin-left:20px;
        overflow: hidden;
      }
      .details-name{
        margin-top:10px;
        height:24px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .details-tip{
          width:60px;
          line-height:25px;
          border:1px solid black;
          border-radius:5px;
        }
      }
      .details-number{
        width:100%;
        line-height:25px;
        @extend .flexBetween;
      }
    }
  }
  .total_count{
    background: #fff;
    margin-top:15px;
    display: flex;
    justify-content: flex-end;
    align-content: space-around;
    flex-wrap: wrap;
    height: 60px;
    padding-bottom: 50px;
    position: relative;
    &>div{
      width:100%;
      text-align: right;
      margin-right: 20px;
      color:gray;
      span{
        color:red;
      }
    }
    .after-sale{
      position: absolute;
      display: block;
      bottom: 10px;
      right: 20px;
      color: red;
      padding: 5px;
      border-radius: 4px;
      border: 1px solid red;
      font-size: 12px;
    }

    .already-apply{
      position: absolute;
      display: block;
      width: 100%;
      bottom: 10px;
      text-align: center;
      font-size: 14px;
      button{
        position: static;
        padding: 15px 0;
        background: none;
        color: blue;
        display: inline-block;
        font-size: 14px;
        line-height: 0;
        overflow: visible;
      }
      button::after{
        background: none;
        border: none;
        position: static;
      }
    }

  }

  // 底部确认订单
  .btn{
    display: flex;
    background: #fff;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    width:100%;
    &>div{
      width:30%;
      text-align: center;
      line-height: 40px;
      background: red;
      color:#fff;
    }
    &>.grey{
      width:30%;
      text-align: center;
      line-height: 40px;
      background: #eee;
      color:gray;
    }
  }

  .wait_pay{
    color:red;
    margin-right: 15px;
  }
  .module{
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    background: rgba(0,0,0,0.5);
    @include flex();
    flex-direction: column;
  }
  .module-pay{
    width: 80vw;
    border-radius: 16rpx;
    background: #ffffff;
    /*padding: 30rpx;*/
    .del-icon{
      width: 60rpx;
      height: 60rpx;
      padding: 10rpx;
    }
    .title{
      width: 100%;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;
    }
    .balance{
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      height: 100rpx;
      line-height: 100rpx;
    }
    .tips{
      @include flex();
      flex-direction: row;
      border-bottom: 1rpx solid #eeeeee;
      border-top: 1rpx solid #eeeeee;
      span{
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        text-align: center;
        @include ellipsis(1);
      }
      span:first-child{
        width: 30%;
      }
      span:last-child{
        width: 70%;
      }
    }
    .btns{
      width: 100%;
      @include flex();
      flex-direction: column;
      padding: 30rpx 0;
      .to-pay{
        width: 30vw;
        background: #58be6a;
        color: #ffffff;
        border-radius: 16rpx;
        padding: 20rpx 0;
        text-align: center;
      }
    }
  }

  .logistics{
    width: calc(100% -80rpx);
    margin-top: 10px;
    min-height: 40px;
    padding: 0 40rpx;
    background: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    img{
      width: 30rpx;
      height: 30rpx;
    }
    .item{
      padding: 5px 0;
      display: flex;
      align-items: center;
    }
    .item-spec{
      width: calc(100% -80rpx);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .copy{
        height: 100%;
        padding: 0 5px;
        color: red;
      }
      img{
        width: 25rpx;
        height: 25rpx;
      }
    }
  }

  /* 收获地址  */
  .address{
    width:100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 12px;
    background: #fff;
    /* border-bottom: 1px dashed gray; */

  }
  .address img{
    width:16px;
    height: 16px;
  }
  .address_wrapper{
    flex:1
  }
  .address_tip{
    margin-left: 10px;
    font-size: 14px;
    flex:1;
  }
  .address_top{
    display: flex;
    align-items: center;
    padding:5px;
    margin-left:10px;
  }
  .address_top_nick{
    margin:0 10px;
  }
  .address_top_tel{
    margin:0 10px;
  }
  .address_bottom{
    margin-left:20px;
    margin-bottom: 10px;
  }
</style>
